<template>
  <view class="discuss">
    <view class="discuss_item" v-for="item in discuss" :key="item.id" @click="toComment(item.id)">
      <view class="title">
        {{item.title}}
      </view>
      <view class="container">
        <view class="context">
          {{item.context}}
        </view>
        <view class="info">
          <span>{{item.from}}</span><span class="time">{{item.time}}</span>
          <span>点赞：{{item.like}}</span>
          <span>讨论：{{item.discuss_count}}</span>
        </view>
      </view>
    </view>
    <view class="comment" @click="addComment">
      <uni-icons type="plus" size="40" color="#fff"></uni-icons>
    </view>
  </view>
</template>

<script>
  export default {
    name: "evaluate_discuss",
    data() {
      return {
        discuss: [{
            id: 5001,
            title: '请问此题的选项为什么有加号',
            context: '内容',
            from: '来自于课件“函数”',
            like: 256,
            discuss_count: 86,
            time: '2022年11月12日'
          },
          {
            id: 5002,
            title: '请问此题的选项为什么有加号',
            context: '内容',
            from: '来自于课件“函数”',
            like: 256,
            discuss_count: 86,
            time: '2022年11月12日'
          },
          {
            id: 5003,
            title: '请问此题的选项为什么有加号',
            context: '内容',
            from: '来自于课件“函数”',
            like: 256,
            discuss_count: 86,
            time: '2022年11月12日'
          },
          {
            id: 5004,
            title: '请问此题的选项为什么有加号',
            context: '内容',
            from: '来自于课件“函数”',
            like: 256,
            discuss_count: 86,
            time: '2022年11月12日'
          }
        ]
      };
    },
    methods: {
      toComment(id){
        uni.navigateTo({
          url:`/subpackage/comment/comment?id=${id}`
        })
      },
      addComment() {
        uni.navigateTo({
          url:'/subpackage/add_comment/add_comment'
        })
      }
    },
    mounted() {
      let _this = this
      uni.$on('commit', function(data) {
        _this.discuss.unshift(data)
        console.log(_this.discuss);
      })
    }
  }
</script>

<style lang="less">
  .discuss {
    .discuss_item {
      padding: 20rpx;
      background-color: #fff;
      border-bottom: 2rpx solid #e2e2e2;

      .title {
        font-size: 36rpx;
        font-weight: 600;
      }

      .container {
        .info {
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
        }
      }
    }

    .comment {
      position: fixed;
      right: 20rpx;
      bottom: 150rpx;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      line-height: 100rpx;
      text-align: center;
      background-color: #00b26a;
    }
  }
</style>
